<!-- PREVIEW DATA -->
<link href="__PUBLIC__/vendors/bootstrap-fileinput/css/fileinput.min.css" rel="stylesheet">
<!-- load the JS files in the right order -->
<!-- sortable plugin for sorting/rearranging initial preview -->
<script src="__PUBLIC__/vendors/bootstrap-fileinput/js/plugins/sortable.min.js"></script>
<!-- purify plugin for safe rendering HTML content in preview -->
<script src="__PUBLIC__/vendors/bootstrap-fileinput/js/plugins/purify.min.js"></script>
<script src="__PUBLIC__/vendors/bootstrap-fileinput/js/fileinput.js"></script>
<script src="__PUBLIC__/vendors/bootstrap-fileinput/js/zh.js"></script>

<div id="multi-container-[uploader-name]">
{php}
$imgsnum = config('business_imgs');
if (!isset($multi_image) || empty($multi_image["[uploader-name]"]))
{
    $previewImage = "''";
    $previewConfig = "''";
}
else
{
    $imageList = $multi_image["[uploader-name]"];
    $config = array();
    foreach ($imageList as $key=>$image)
    {
        $data = array(
            "url" => url(""),
            "key" => $key,
        );
        echo "<input type='hidden' name='[uploader-name][]' id='multi-image-[uploader-name]-" . $key . "' value='" . $image . "'>";
        $config[] = $data;
    }

    $previewImage = json_encode($imageList);
    $previewConfig = json_encode($config);
}
{/php}
</div>

<input id="multi-uploader-[uploader-name]" name="multi-uploader-[uploader-name]" type="file" multiple class="file-loading">

<script>
    //上传处理器
    var uploader = $("#multi-uploader-[uploader-name]");

    //图片容器
    var container = $("#multi-container-[uploader-name]");

    uploader.fileinput({
        language: 'zh',
        uploadUrl: "{:url('Utils/uploadSingleImage',array('name'=>'multi-uploader-[uploader-name]'))}",
        uploadAsync: true,
        autoReplace: true,
        minFileCount: 1,
        maxFileCount: {$imgsnum},
        overwriteInitial: false,
        showUpload: false,
        showRemove: false,
        maxFileSize: 1024,
        layoutTemplates: {actionZoom:""},
        initialPreview: {$previewImage},
        initialPreviewAsData: true, // identify if you are sending preview data only and not the raw markup
        initialPreviewFileType: 'image', // image is the default and can be overridden in config below
        initialPreviewConfig: {$previewConfig},
        purifyHtml: true, // this by default purifies HTML data for preview
        uploadExtraData: {
        img_key: "1000",
            img_keywords: "happy, places",
    }
    }).on('fileuploaded', function(event, data, id) {
        if(data.response)
        {
            if (data.response.status == 0)
            {
                //获取图像URL
                var url = data.response.url;

                container.append("<input type='hidden' name='[uploader-name][]' id='multi-image-[uploader-name]-" + id + "' value='" + url + "'>");
            }
        }

    }).on('fileclear', function(event, id) {
        container.html("");
    }).on('filesuccessremove', function(e, id) {
        console.log('File uploaded params', id);
        $("#multi-image-[uploader-name]-" + id).remove();
    }).on('filedeleted', function(e, id) {
        console.log('File uploaded params', id);
        $("#multi-image-[uploader-name]-" + id).remove();
    });

</script>